<template>
    <form-field class="ph-field-textarea" :dirty="dirty" @valid="onValid">
        <textarea class="ph-textarea" spellcheck="true" :value="value" :placeholder="placeholder" :disabled="disabled" @change="onChange"></textarea>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import FormField from './field.vue'
export default defineComponent({
    components:{
        FormField
    },
    props:{
        placeholder:{
            type:String
        },
        value:{
            type:String
        },
        disabled:{
            type:Boolean
        }
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        const onChange = (e:Event)=>{
            const t = e.target as HTMLInputElement
            dirty.value = t.value
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>
<style lang="scss">
@import '../../assets/scss/predef.scss';
.ph-field-textarea{
    &.ph-field-plain .ph-field-label{
        width: 100%;
        border-radius: 5px 5px 0 0!important;
        text-align: left;
    }
    .ph-field-label{
        align-self: flex-start;
    }
    .ph-textarea{
        @include input();
        display: block;
        border-color: var(--ph-form-border);
        margin-top: -1px;
        min-height: calc(var(--phx) * 7.8571);
        flex: 1;
        &:disabled{
            resize: none;
        }
    }
}
</style>